<template>
    <div style="width: 100%;height: 2500px">
      <div class="top" style="float: left;">
        <div class="search">
          <el-input  v-model="input" placeholder="搜索你想要的内容" style="width: 300px;"></el-input>
          <el-button type="warning" round @click="onSubmit()">搜索</el-button>
        </div>
        <div class="pic2">
          <div>
            <div class="pic21">
              <img src="http://qoz3190o1.hd-bkt.clouddn.com/src%3Dhttp___bpic.588ku.com_element_origin_min_pic_00_91_84_2256f1844a88731.jpg%26refer%3Dhttp___bpic.588ku.jpg"/>
              <div class="pic22">上传视频</div>
            </div>
          </div>
          <div>
            <div class="pic21" @click="chongzhi()" >
              <img src="http://qoz3190o1.hd-bkt.clouddn.com/u%3D1091995538%2C4097802728%26fm%3D26%26gp%3D0.jpg"/>
              <div class="pic22">充值抖币</div>
            </div>
          </div>
          <div >
            <div class="pic21" @mouseover="showpic()" @mouseleave="showpic2()">
              <img src="http://qoz3190o1.hd-bkt.clouddn.com/u%3D1416799284%2C860429581%26fm%3D26%26gp%3D0.jpg"/>
              <div  class="pic22">用户</div>
              <div class="pic22"></div>
            </div>
          </div>
        </div>

      </div>

      <div class="pic1">
        <!--http://qoz3190o1.hd-bkt.clouddn.com/logo.jpg-->
        <img src="http://qoz3190o1.hd-bkt.clouddn.com/logo.jpg"/>
        <div class="pic22"></div>
      </div>

      <div class="row3">
        <el-button type="info" class="row3_button" @click="myLike()"><i class="el-icon-star-on"></i>我的关注</el-button>
        <el-button type="info" class="row3_button" @click="shortVideo()">短视频</el-button>
        <el-button type="info" class="row3_button" @click="onLine()">直播</el-button>
        <el-button type="info" class="row3_button" @click="sameCity()">同城</el-button>
        <el-button type="info" class="row3_button" @click="Submit()">栏目</el-button>
      </div>

      <div class="row5">
        <div class="row51">
          <div class="row511">精彩短视频</div>
          <div class="row512" @click="more()">更多></div>
        </div>
        <div class="row52">
            <span  v-for="(iteam,index) in players" class="row521">
              <div class="row52111">
                <video controls class="vjs-custom-skin">
                  <source type="video/mp4"
                          :src="iteam.videoUrl"/>
                </video>
                <div @click="videoplay(iteam.videoId)" class="row52112">{{iteam.videoInfo}}</div>
                <div>
                  <div class="row521121">{{iteam.videoHot}}</div>
                  <div class="row521122">喜欢:</div>
                </div>
              </div>
            </span>
        </div>
      </div>
      <div id="page" class="row6">
        <div class="row61">
          <button class="row611" @click="finbytype(1)">舞蹈</button>
          <button class="row611" @click="finbytype(2)">颜值</button>
          <button class="row611" @click="finbytype(4)">二次元</button>
          <button class="row611" @click="finbytype(5)">生活</button>
          <button class="row611" @click="finbytype(6)">汽车</button>
          <button class="row611" @click="finbytype(7)">土味</button>
        </div>
        <div class="row8">
          <span v-for="(iteam,index) in videos" class="row521">
            <div class="row52111">
              <video controls class="vjs-custom-skin">
                <source type="video/mp4"
                        :src="iteam.videoUrl"/>
              </video>
              <div @click="videoplay(iteam.videoId)" class="row52112">{{iteam.videoInfo}}</div>
              <div>
                <div class="row521121">{{iteam.videoHot}}</div>
                <div class="row521122">喜欢:</div>
              </div>
            </div>
          </span>
        </div>
      </div>

      <div class="row7" style="display:none" >
        <div class="row71">
          <div class="row711">
            <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
            <!--<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>-->
          </div>
          <div class="row713"></div>
          <div class="row712">昵称</div>
          <div class="row713"></div>
          <div class="row712">邮箱</div>
        </div>
        <div class="row72">

        </div>
      </div>
    </div>
</template>

<script>
  import axios from 'axios';
  axios.defaults.withCredentials=true;
    export default {
      name: "index",
      data() {
        return {
          input: '',
          players: [],
          picshow: 'none',
          videos: [],
          type: 1,
          payHistory: {
            payMoney: '',
          },
          alipayWap: '',
          dialogVisible:false,
          tableData:[],
          activeName: 'first',
        }
      },
      methods:{
        sameCity:function(){
          this.$router.push('/samecity');
        },
        Submit :function() {
          // 获取点击的按钮对应页面的id
          var PageId = document.querySelector('#page');
          // 打印出对应页面与窗口的距离
          console.log(PageId.offsetTop);
          // 使用平滑属性，滑动到上方获取的距离
          // 下方我只设置了top，当然 你也可以加上 left 让他横向滑动
          // widow 根据浏览器滚动条，如果你是要在某个盒子里面产生滑动，记得修改
          window.scrollTo({
            'top': PageId.offsetTop,
            'behavior': 'smooth'
          })
        },
        shortVideo(){
          this.$router.push('/videos');
        },

        chongzhi(){
          this.$router.push('/chongzhi');
        },

        videoplay(videoId){
          this.$cookie.set("videoId",videoId);
          this.$router.push("/videoplay");
        },
        getPayHistory:function(){
          var token=this.$cookie.get("token");
          axios.post("http://localhost/kd-user/user/getPayHistory",{token:token}).then(res=>{
            if(res.data.code==200){
              this.tableData=res.data.data;
            }
          })
        },

        onSubmit:function () {
          this.$router.push({
            path: "/search",
            query: {name: this.input}
          });
          /*axios.post("",this.input).then(res=>{

          })*/
        },
        finbytype:function (num) {
          alert(num);
          /*axios.post("",this.input).then(res=>{

          })*/
        },
        most: function () {
          axios.post("http://localhost/kd-user/user/findTheMostHotPlaysTopTen").then(res => {
            if (res.data.code == 200) {
              this.players = res.data.data;
            }
          })
        },
        more: function(){
          this.$router.push("/videos")
        },
        showpic(){
          var pic=document.getElementsByClassName("row7")[0];
          pic.style.display="block";
        },
        showpic2(){
          var pic=document.getElementsByClassName("row7")[0];
          pic.style.display="none";
        },
        finbytype: function (type) {
          this.videos = [];
          axios.post("http://localhost/kd-user/user/findVideoByType/"+type).then(res => {
            if (res.data.code == 200) {
              this.videos = res.data.data;
            }
          })
        }
      },
      mounted() {
        //查找热气最高的10个主播
        this.most();
        this.finbytype(this.type);
        this.getPayHistory();
      }
    }
</script>

<style scoped>
  .search{
    width: 500px;
    height: 50px;
    margin: auto;
  }
  .pic1{
    width: 100%;
    height: 390px;
    position: absolute;
  }
  .pic1 img{
    width: 100%;
    height: 390px;
    float: left;
  }
  .top{
    width: 100%;
    height:50px;
    position: absolute;
    z-index: 10;
  }
  .pic2{
    position: absolute;
    top: 0px;
    right: 30px;
    width: 270px;
    height: 90px;
    float: left;
  }
  .pic21{
    width: 90px;
    height: 90px;
    float: left;
  }
  .pic2 img{
    width: 35px;
    height: 35px;
  }
  .pic22{
    width: 90px;
    height: 30px;
    float: left;
    color: aqua;
  }
  .row3{
    width: 100%;
    height: 50px;
    position: absolute;
    top: 399px;
  }
  .row3_button{
    width: 120px;
    height: 50px;
  }
  .row5{
    width: 100%;
    height: 1250px;
    position: absolute;
    top: 500px;
  }
  .row51{
    width: 100%;
    height: 50px;
  }
  .row511{
    height: 50px;
    width: 200px;
    font-size: xx-large;
    font-weight: 700;
    font-style: oblique;
    color: cadetblue;
    float: left;
  }
  .row512{
    line-height: 50px;
    width: 300px;
    height: 50px;
    color: violet;
    cursor: pointer;
  }
  .row52{
    width: 1500px;
    height: 1215px;
    margin-left: 50px
  }

  .row8{
    width: 1500px;
    height: auto;
    margin: 100px 0 0 0 ;
  }
  .row521{
    width: 300px;
    height: 600px;
    float: left;
  }
  .row52111{
    width: 280px;
    height: 500px;
    margin: auto;
  }
  .vjs-custom-skin{
    width: 280px;
    height: 500px;
  }
  .row52112{
    width: 280px;
    height: 60px;
    text-align: initial;
    cursor: pointer;
  }
  .row521121{
    width: 50px;
    float: right;
    height: 30px;
    line-height: 30px;
    color: chocolate;
  }
  .row521122{
    width: 70px;
    float: right;
    height: 30px;
    line-height: 30px;
    color: chocolate;
  }
  .row6{
    width: 100%;

    height: 70px;
    position: absolute;
    top: 1800px;
  }
  .row61{
    width: 80%;
    height: 70px;
    margin: auto;
    background-color: #ece5e5;
    border-radius: 35px;
    border-style: inset;
  }
  .row611{
    width: 200px;
    height: 70px;
    margin: auto;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
    font-size: -webkit-xxx-large;
    font-style: oblique;
    color: brown;
    background-color: #ece5e5;
    border-width: 0px;
  }
  .row7{
    z-index: 10;
    background-color: antiquewhite;
    position: absolute;
    width: 500px;
    height: 300px;
    top: 80px;
    right: 30px;
    border-radius: 75px;
  }

  .row71{
    width: 500px;
    height: 150px;
  }
  .row72{
    width: 500px;
    height: 150px;
  }
  .row711{
    width: 150px;
    height: 150px;
    float: left;
  }
  .row711 img{
    width: 100px;
    height: 100px;
    margin-top: 25px;
    border-radius: 50px;
  }

  .row712{
    width: 100px;
    height: 30px;
    float: right;
    margin-top: 28px;
  }
  .row713{
    width: 250px;
    height: 30px;
    float: right;
    margin-top: 28px;
  }

  ::-webkit-scrollbar{
    /*垂直滚动条的宽*/
    width: 5px;
    height: 16px;
  }
  ::-webkit-scrollbar-track-piece{
    /*修改滚动条的背景和圆角*/
    background: #abcdef;
    -webkit-border-radius: 6px;
  }
  /*修改垂直滚动条的样式*/
  ::-webkit-scrollbar-thumb:vertical{
    background-color: #ffffff;
    -webkit-border-radius: 6px;
  }

  /*修改水平滚动条的样式*/
  ::-webkit-scrollbar-thumb:horizontal{
    background-color: #faa;
    -webkit-border-radius: 6px;
  }




</style>
